<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.areaHeight"
        />
      </el-form-item>
    </div>
    <!--  -->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">字体大小设置</el-divider>
      </div>
       <el-form-item label="医生名字">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.nameFontSize"
        />
      </el-form-item>
       <el-form-item label="医生职称">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.levelFontSize"
        />
      </el-form-item>
      <el-form-item label="医生介绍字体">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.introFontSize"
        />
      </el-form-item>
    </div>
     <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">滚动设置</el-divider>
      </div>
       <el-form-item label="左侧滚动">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.leftSrollSpeed"
        />
      </el-form-item>
       <el-form-item label="右侧滚动">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.rightSrollSpeed"
        />
      </el-form-item>
    </div>
    
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">医院设置</el-divider>
      </div>
      <el-form-item label="Logo">
        <el-switch v-model="optionsInfo.logoShow" />
      </el-form-item>
      <el-form-item label="企业Logo" class="logo-area-set">
        <el-button type="primary" @click="handleSelect('logoUrl')">
          选择LOGO
        </el-button>
        <div class="picture-wrap">
          <template v-if="!!optionsInfo?.logoUrl">
            <img :src="`${optionsInfo.logoUrl}`" alt="企业Logo" />
            <p class="icon-wrap" @click="optionsInfo.logoUrl = ''">
              <i class="el-icon-close icon-delete" />
            </p>
          </template>
          <template v-else>
            <div class="el-upload" @click="handleSelect('logoUrl')">
              <i class="el-icon-plus avatar-uploader-icon" />
            </div>
          </template>
        </div>
      </el-form-item>
      <el-form-item label="标语">
        <el-input
          size="small"
          v-model="optionsInfo.slogan"
          placeholder="标语"
          class="qrcodeMarBott"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="医院介绍标题">
        <el-input
          size="small"
          v-model="optionsInfo.introTitle"
          placeholder="标语"
          class="qrcodeMarBott"
        ></el-input>
      </el-form-item> -->
      <!-- <el-form-item label="医院介绍">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 8 }"
          size="small"
          v-model="optionsInfo.introContent"
          placeholder="标语"
          class="qrcodeMarBott"
        ></el-input>
      </el-form-item> -->
    </div>
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">广告设置</el-divider>
      </div>
      <el-form-item label="广告类型">
        <el-radio-group v-model="optionsInfo.advType" size="small">
          <el-radio-button label="image">图片</el-radio-button>
          <el-radio-button label="video">视频</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="广告高度">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.advHeight"
        />
      </el-form-item>
      <el-form-item label="图片" v-if="optionsInfo.advType === 'image'">
        <el-button type="primary" @click="handleSelect('advImgList',optionsInfo.advImgList)">
          选择图片
        </el-button>
        <Draggable
          class="list-group"
          :list="optionsInfo.advImgList"
          :animation="100"
        >
          <div v-for="(item, index) in optionsInfo.advImgList" :key="index">
            {{ item.url }}
            <i
              class="el-icon-close icon-delete"
              @click="optionsInfo.advImgList.splice(index, 1)"
            />
          </div>
        </Draggable>
      </el-form-item>
      <el-form-item label="视频" v-if="optionsInfo.advType === 'video'">
        <el-button
          type="primary"
          @click="handleSelect('advVideoList', optionsInfo.advVideoList)"
        >
          选择视频
        </el-button>
        <Draggable
          class="list-group"
          :list="optionsInfo.advVideoList"
          :animation="100"
        >
          <div v-for="(item, index) in optionsInfo.advVideoList" :key="index">
            {{ item.url }}
            <i
              class="el-icon-close icon-delete"
              @click="optionsInfo.advVideoList.splice(index, 1)"
            />
          </div>
        </Draggable>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">接口设置</el-divider>
      </div>
      <el-form-item label="接口状态" class="replenish-shown">
        <el-switch v-model="optionsInfo['ApiState']" />
      </el-form-item>
      <template v-if="optionsInfo['ApiState']">
        <el-form-item label="接口类型" class="replenish-shown">
          <el-select
            v-model="optionsInfo['ApiType']"
            placeholder="请选择"
            size="small"
          >
            <el-option
              v-for="item in ApiTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="接口地址"
          class="replenish-shown"
          v-if="optionsInfo['ApiType'] === 1"
        >
          <el-input
            v-model="optionsInfo['ApiAddress']"
            size="small"
            placeholder="请输入内容"
          />
        </el-form-item>

        <el-form-item
          label="接口标识"
          v-if="optionsInfo['ApiType'] === 2"
          class="replenish-shown"
        >
          <el-input
            v-model="optionsInfo['ApiSign']"
            size="small"
            placeholder="请输入内容"
          />
        </el-form-item>

        <!--接口请求频次-->
        <el-form-item
          label="请求频次(s)"
          class="replenish-shown"
          v-if="!optionsInfo['backstageRefresh']"
        >
          <el-input-number
            :min="5"
            size="small"
            v-model="optionsInfo['frequencyApi']"
          />
        </el-form-item>

        <!--是否开启无感刷新-->
        <el-form-item label="开启无感刷新" class="replenish-shown">
          <el-switch v-model="optionsInfo['backstageRefresh']" />
        </el-form-item>
      </template>
    </div>
    <!--选择图片的弹层-->
    <SelectPicture
      :info="PictureInfo.info"
      :visible="PictureInfo.visible"
      @handleSure="handleSure"
      @handleCancel="handleCancel"
    />
    <!--轮播图弹层-->
    <updatePicture
      @handleSure="handleSure"
      @handleCancel="handleCancel"
      :info="formCarouselInfo.info"
      :visible="formCarouselInfo.visible"
    />
  </div>
</template>

<script>
import Draggable from "vuedraggable";
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import * as types from "@c/public/form-designer/devType/datas-types";
import SelectPicture from "@c/public/layer/template/selectPicture/index.vue";
import updatePicture from "@c/public/layer/template/updatePicture/index.vue";

export default {
  name: "publishSchedulingAdv3096-editor",

  componentName: "publishSchedulingAdv3096-editor",

  mixins: [],

  components: { Draggable, SelectPicture, updatePicture },

  props: {
    designer: Object,
    optionModel: Object,
    selectedWidget: Object,
  },

  inject: ["serverFieldList", "getDesignerConfig"],

  data() {
    return {
      radio: 1,
      screenType: "",
      optionsInfo: Object(),
      constantDic: constantDic,
      ApiTypeOptions: [
        {
          value: 1,
          label: "接口地址",
        },
        {
          value: 2,
          label: "接口标识",
        },
      ],
      PictureInfo: {
        visible: false,
        info: 1,
      },
      // 轮播图
      formCarouselInfo: {
        visible: false,
        info: "",
      },
      formVideoInfo: {
        info: Object(),
        visible: false,
        multiple: false,
      },
      updateImg: "",
      predefineColors: types["predefineColors"],
      fontWeightOptions: types["fontWeightOptions"],
    };
  },

  computed: {
    fieldHas() {
      return function (field) {
        return Reflect.has(this.optionsInfo, field);
      };
    },

    isDisabled() {
      return function (val) {
        let arr = [];
        return arr.includes(val);
      };
    },
  },

  methods: {
    handleDragEnd(val) {
      console.log(val);
    },

    // 选择图片
    handleSelect(value, content) {
      let info = Object();
      switch (value) {
        case "logoUrl":
          this.updateImg = value;
          let { logoUrl } = this.optionsInfo;
          Reflect.set(info, "type", 1);
          Reflect.set(info, "content", logoUrl);
          Reflect.set(this.PictureInfo, "visible", true);
          Reflect.set(this.PictureInfo, "info", info);
          break;
        case "advImgList":
          this.updateImg = value;
          // 查找资源库对应的资源
          Reflect.set(info, "type", "image");
          // 修改对应的字段
          Reflect.set(info, "updataType", "advImgList");
          // 是否支持多图片
          Reflect.set(info, "multiple", false);
          Reflect.set(info, "content", "");
          Reflect.set(this.formCarouselInfo, "visible", true);
          Reflect.set(this.formCarouselInfo, "info", info);
          break;
        case "advVideoList":
          this.updateImg = value;
          // 查找资源库对应的资源
          Reflect.set(info, "type", "video");
          // 修改对应的字段
          Reflect.set(info, "updataType", "advVideoList");
          // 是否支持多图片
          Reflect.set(info, "content", content || []);
          Reflect.set(info, "multiple", false);
          Reflect.set(this.formCarouselInfo, "visible", true);
          Reflect.set(this.formCarouselInfo, "info", info);
          break;
        default:
          this.updateImg = "Logo";
          let { imageUrl } = this.optionsInfo;
          Reflect.set(info, "content", imageUrl);
      }
    },
    // 取消弹层
    handleCancel() {
      Reflect.set(this.PictureInfo, "visible", false);
      Reflect.set(this.formCarouselInfo, "visible", false);
    },

    handleSure(value, content) {
      const self = this;
      console.log(value);
      console.log(content);
      console.log(this.updateImg);
      let { key, val } = value;

      switch (this.updateImg) {
        case "logoUrl":
          Reflect.set(this.optionsInfo, "logoUrl", value.val.url);
          break;
        case "advImgList":
          // let list = this.optionsInfo.advImgList;
          // list.push(...value.val);
          // Reflect.set(this.optionsInfo, "advImgList", list);
          if (key === "advImgList") {
            Reflect.set(this.optionsInfo, key, val);
          }

          break;
        case "advVideoList":
          if (key === "advVideoList") {
            Reflect.set(this.optionsInfo, key, val);
          }
          // let list2 = this.optionsInfo.advVideoList;
          // list2.push(...value.val);
          // Reflect.set(this.optionsInfo, "advVideoList", list2);
          break;
        default:
          Reflect.set(this.optionsInfo, "imageUrl", value.val.val);
      }
    },
  },

  watch: {
    optionModel: {
      handler: function (val) {
        let key = val.config;
        this.optionsInfo = val[key];
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>


<style lang="scss" scoped>
.el-upload {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  cursor: pointer;
  line-height: 80px;
  vertical-align: top;
  &:hover {
    border-color: #409eff;
    color: #409eff;
  }

  .el-icon-plus {
    // font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.45);
  }
}
.col-info {
  ::v-deep .el-form-item__content {
    margin-left: 1px !important;

    .title {
      width: 100%;
    }

    .el-checkbox__label {
      width: auto;
    }

    .el-icon-thumb {
      position: relative;
      top: 8px;
      padding-left: 10px;
      font-size: 18px;
      text-align: center;
    }

    .el-checkbox {
      width: calc(100% - 32px);
    }
  }
}

.row-option {
  :deep(.el-checkbox) {
    display: flex;
    flex-direction: row;

    .el-checkbox__input {
      display: flex;
      align-self: flex-start;
      align-items: flex-start;
    }

    .el-checkbox__label {
      display: flex;
      flex-direction: row;

      .setting-info {
        display: flex;
        flex-direction: column;

        .el-input {
          width: 100%;
          margin-bottom: 20px;

          input[type="number"] {
            line-height: normal !important;
          }
        }

        .el-input-number {
          width: 100%;
        }

        .el-input__inner {
          padding-right: 0 !important;
        }
      }
    }
  }
}
</style>